$(function () {
    let state = null
    $('.btn-pub').on('click', function () {
        state = "已发布"
    })
    $('.btn-cg').on('click', function () {
        state = "草稿"
    })


    var toolbarOptions = [
        ['bold', 'italic', 'underline', 'strike','image'],        // toggled buttons
        ['blockquote', 'code-block'],
      
        [{ 'header': 1 }, { 'header': 2 }],               // custom button values
        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
        [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
        [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
        [{ 'direction': 'rtl' }],                         // text direction
      
        [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
      
        [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
        [{ 'font': [] }],
        [{ 'align': [] }],
      
        ['clean']                                         // remove formatting button
      ];
      



    //编辑富文本
    
    const quill = new Quill('#editor', {
        modules: {
            toolbar: toolbarOptions
          },
      theme: 'snow'
    });
    function initselectAdd() {
        $.get('/my/article/cates', function (res) {
            if (res.status === 0) {
                const htmlStr = template('templ-select', res)
                $('[name="cate_id"]').html(htmlStr)
                $('.ql-toolbar select').attr('lay-ignore','')
                layui.form.render('select')
                $('.ql-toolbar select').css('display','none')
            }
           
        })
    }
    initselectAdd()

    const $image = $('#image')
  
    // 2. 裁剪选项
    var options = {
      aspectRatio: 400 / 280,
      preview: '.img-preview'
    }
    
    // 3. 初始化裁剪区域
    $image.cropper(options)



    $('.btn-choose-img').on('click', function () {
        $('#file').click()
    })
    $('#file').on('change', function (e) {
        const files = e.target.files
        if (files.length === 0) return
        //进行封面替换
        const imgSrc = URL.createObjectURL(files[0])
        //销毁旧的裁剪区域
        $image.cropper('destroy')
        $image.attr('src', imgSrc)
        $image.cropper(options)
    })


    $('.form-pub').on('submit', function (e) {
        e.preventDefault()
        const fd = new FormData()
        fd.append('title', $('[name="title"]').val().trim())
        
        fd.append('cate_id', $('[name="cate_id"]').val())
        // console.log($('[name="cate_id"]').val());
        fd.append('content', quill.root.innerHTML)
        // console.log(quill.root.innerHTML);
        fd.append('state', state)
        console.log(state);
        $image
            .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
              width: 400,
              height: 280
            })
            .toBlob(function(blob) {       // 将 Canvas 画布上的内容，转化为文件对象
              // 得到文件对象后，进行后续的操作
                fd.append('cover_img', blob)
                console.log(fd)
                $.ajax({
                    type: 'POST',
                    url: '/my/article/add',
                    data: fd,
                    
                    //上传文件配置参数要写processData  contentType
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        console.log(res);
                        layer.msg(res.message)
                        if (res.status === 0) {
                            location.href = '/article/art_list.html'
                            
                        }
                    }
                })
            })
    })
})